<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">

      <el-header style="text-align: right; font-size: 12px">
        <el-breadcrumb separator="/" style=" width: 500px;float: left;height: 60px ;line-height: 60px">
          <el-breadcrumb-item :to="{ path: '/studentInfo' }"><strong style="cursor: pointer">首页</strong></el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown>
          <span><i class="el-icon-setting" ></i>{{$store.state.empName}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><a @click="insertEmployment" style="color: black">添加学生就业信息</a></el-dropdown-item>
            <el-dropdown-item><span @click="loginOut()">退出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <!--    搜索框-->
      <div style="padding: 10px">
        <!--      学生编号-->
        <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">学生编号&nbsp;</span>
        <el-input v-model="condition.studentId" placeholder="学生编号" style="width: 10%;float: left"></el-input>
        <!--      就业状态-->
        <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">就业状态&nbsp;</span>
        <el-select v-model="condition.obtainEmpStatus" placeholder="请选择" style="width: 10%;float: left">
          <el-option label="正常就业" value="1"></el-option>
          <el-option label="未就业" value="2"></el-option>
          <el-option label="就业专业不对口" value="3"></el-option>
          <el-option label="自主就业" value="4"></el-option>
        </el-select>
        <!--      是否提交Offer-->
        <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">是否提交Offer&nbsp;</span>
        <el-select v-model="condition.isProvideOffer" placeholder="请选择" style="width: 10%;float: left">
          <el-option label="是" value="0"></el-option>
          <el-option label="否" value="1"></el-option>
        </el-select>
        <el-button @click="searchClass()" style="float: left" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="getEmploymentByPage()" style="float: left;align-content: center" icon="el-icon-refresh">重置</el-button>
      </div>
      <!--  表数据-->
      <el-main>
        <el-table :data="page.records" border>
          <el-table-column prop="obtainEmpId" label="就业信息编号" width="120"></el-table-column>
          <el-table-column prop="studentId" label="学员编号" width="120"></el-table-column>
          <el-table-column prop="obtainEmpTime" label="就业时间" width="150"></el-table-column>
          <el-table-column prop="obtainEmpPlace" label="就业地点" width="200"></el-table-column>
          <el-table-column prop="corporateName" label="公司名称" width="150"></el-table-column>
          <el-table-column prop="salaryDuringProbation" label="试用期薪资" width="100"></el-table-column>
          <el-table-column prop="formalSalary" label="转正薪资" width="100"></el-table-column>
          <el-table-column prop="post" label="岗位" width="110"></el-table-column>
          <el-table-column prop="obtainEmpStatus" label="就业状态" width="100">
            <template slot-scope="scope">
              <span>{{showObtainEmpStatus(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isProvideOffer" label="是否提交Offer" width="120">
            <template slot-scope="scope">
              <span>{{showIsProvideOffer(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="80"></el-table-column>
          <el-table-column prop="studentId" label="操作" width="120">
            <template slot-scope="scope">
              <a href="#" @click="updateEmployment(scope.row)">修改</a>
              <a href="#" @click="deleteEmployment(scope.row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="SizeChange"
            @current-change="CurrentChange"
            :current-page="page.current"
            :page-sizes="[5, 10, 15]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
        <el-dialog title="" :visible.sync="insertDialogVisible" width="50%" :before-close="Close">
          <h1 v-if="employmentData.obtainEmpId==null">添加就业信息</h1>
          <h1 v-if="employmentData.obtainEmpId!=null">修改就业信息</h1>
          <div id="">
            <span v-if="employmentData.obtainEmpId!=null">就业信息编号：</span><el-input v-model="employmentData.obtainEmpId" placeholder="就业信息编号" v-if="employmentData.obtainEmpId!=null" style="width: 85%"></el-input><br>
            <span>学员编号： <span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span><el-input v-model="employmentData.studentId" placeholder="学员编号" style="width: 85%"></el-input><br>
            <span>就业时间： <span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
            <el-date-picker
              v-model="employmentData.obtainEmpTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 85%">
            </el-date-picker><br>
            <span>就业地点： <span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span><el-input v-model="employmentData.obtainEmpPlace" placeholder="就业地点" style="width: 85%"></el-input><br>
            <span>公司名称： <span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span><el-input v-model="employmentData.corporateName" placeholder="公司名称" style="width: 85%"></el-input><br>
            <span>试用期薪资：<span v-html="'\u00a0\u00a0\u00a0'"></span></span><el-input v-model="employmentData.salaryDuringProbation" placeholder="试用期薪资" style="width: 85%"></el-input><br>
            <span>转正薪资： <span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span><el-input v-model="employmentData.formalSalary" placeholder="转正薪资" style="width: 85%"></el-input><br>
            <span>岗位： <span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span><el-input v-model="employmentData.post" placeholder="岗位" style="width: 85%"></el-input><br>
            <div>
              <span>就业状态：<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
              <el-radio v-model="employmentData.obtainEmpStatus" :label="1" style="line-height: 40px">正常就业</el-radio>
              <el-radio v-model="employmentData.obtainEmpStatus" :label="2" style="width: 20%">未就业</el-radio>
              <el-radio v-model="employmentData.obtainEmpStatus" :label="3" style="width: 20%">就业专业不对口</el-radio>
              <el-radio v-model="employmentData.obtainEmpStatus" :label="4" style="width: 20%">自主就业</el-radio>
            </div>
            <div>
              <span>是否提交Offer：</span>
              <el-radio v-model="employmentData.isProvideOffer" :label="0" style="line-height: 40px">是</el-radio>
              <el-radio v-model="employmentData.isProvideOffer" :label="1" style="width: 74%">否</el-radio>
            </div>
            <span>备注： <span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span><el-input v-model="employmentData.remarks" placeholder="备注" style="width: 85%"></el-input><br>
          </div>
          <span slot="footer" class="dialog-footer">
          <el-button @click="DialogCancel">取 消</el-button>
          <el-button type="primary" @click="DialogCommit">确 定</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import instance from "../../utils/request";

export default {
  name: "employment",
  data(){
    return{
      employmentData:{},//学生就业信息数据
      insertDialogVisible:false,//添加、修改学生就业信息对话框显示
      condition:{},//条件对象
      page: {//页面对象
        current:1,//当前页码
        size:10,//页面大小
        // total:0,//数据总条数
        // records:{}//数据
      },
    }
  },methods:{
    getEmploymentByPage() {
      this.condition={};
      instance.get("/obtainEmployment/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page=res.data;
      });
    },SizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
      instance.get("/obtainEmployment/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page=res.data;
      });
    },CurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      instance.get("/obtainEmployment/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page=res.data;
      });
    },insertEmployment(){
      this.employmentData={};
      this.insertDialogVisible=true;
    },DialogCancel(){
      this.$message("已取消!");
      this.employmentData = {};//清空表单
      this.insertDialogVisible = false;//隐藏弹出窗
    },DialogCommit(){
      //提交到后台
      instance.post("/obtainEmployment",this.employmentData).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("操作成功!");
          this.getEmploymentByPage();
        }else {
          this.$message("操作失败!");
        }
      });
      this.employmentData = {};//清空表单
      this.insertDialogVisible = false;//隐藏弹出窗
      this.getEmploymentByPage();
    },Close(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          this.employmentData={};//清空表单数据
          done();
        })
        .catch(_ => {});
    },updateEmployment(row){
      instance.get("/obtainEmployment/"+row.obtainEmpId).then(res=>{
        this.employmentData=res.data;
      });
      this.insertDialogVisible=true;
    },deleteEmployment(row){
      instance.delete("/obtainEmployment/"+row.obtainEmpId).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("删除成功!");
          this.getEmploymentByPage();
        }else {
          this.$message("删除失败!");
        }
      });
      this.getEmploymentByPage();
    },showObtainEmpStatus(row){
      let obtainEmpStatus='';
      if (row.obtainEmpStatus==1){
        obtainEmpStatus="正常就业";
      }else if(row.obtainEmpStatus==2){
        obtainEmpStatus="未就业";
      }else if(row.obtainEmpStatus==3){
        obtainEmpStatus="就业专业不对口";
      }else if(row.obtainEmpStatus==4){
        obtainEmpStatus="自主就业";
      }
      return obtainEmpStatus;
    },showIsProvideOffer(row){
      let isProvideOffer='';
      if (row.isProvideOffer==0){
        isProvideOffer="是";
      }else{
        isProvideOffer="否";
      }
      return isProvideOffer;
    },searchClass(){
      //按条件查询获取学生信息分页形式
      this.condition.current = this.page.current;
      this.condition.pageSize = this.page.size;
      instance.post("/obtainEmployment/condition",this.condition).then(res => {
        this.page = res.data;//查询数据并赋值
      });
    },
    loginOut(){//退出登录
      location.reload();
    }
  },created() {//钩子函数
    //获取所有学生就业信息
    this.getEmploymentByPage();
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
</style>
